<script setup lang="ts">
import {onMounted} from 'vue'
import {useUserStore} from '@/stores/user'
import router from "@/router";
import UserInfoCard from "@/components/UserInfoCard.vue";
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {ElMessage} from "element-plus";
const route = useRoute()
//计算当前路由
const activeIndex = computed(() => {
  switch (route.path) {
    case '/index':
      return '1'
    case '/services':
      return '2'
    case '/personal-orders':
      return userStore.authState ? '3' : ''
    case '/backend-management':
    case '/backend-management/employee':
    case '/backend-management/order':
    case '/backend-management/dataAnalysis/order':
    case '/backend-management/dataAnalysis/employee':
      return '4'
    case '/about':
      return '5'
  }
})
const handleIndex = () => {
  router.push('/index')
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
//拦截未登录用户查看订单
const handleOrderManagement = () => {
  if (!userStore.authState) {
    ElMessage({
      message: '请先登录后再访问订单管理',
      type: 'warning',
      duration: 3000
    })
    // 移除 router.push('/') 保持当前路由
  } else {
    router.push('/personal-orders')
  }
}
const handleBackendManagement = () => {
  router.push('/backend-management/order')
}
/**
 * 登录状态 控制登录按钮 和 个人中心
 */
const userStore = useUserStore()
/**
 * 获取用户信息
 */
onMounted(async() => {
  try {
    await userStore.fetchUserInfo()
  } catch (error) {
    console.error('初始化用户信息失败：', error)
  }
})
/**
 * 登录
 */
const login = () => {
  router.push('/login')
}
/**
 * 个人中心
 */
const showUserInfo = () => {
  userStore.userInfoBoxState = true
}
const handleServiceClick = () => {
  const featuresSection = document.getElementById('service-features');
  if (featuresSection) {
    featuresSection.scrollIntoView({ behavior: 'smooth' });
  }
}
const handleAboutClick = () => {
  const aboutSection = document.getElementById('about-us');
  if (aboutSection) {
    aboutSection.scrollIntoView({ behavior: 'smooth' });
  }
};

</script>

<template>
  <div class="header">
    <div class="wrap">
      <div class="logo-title">
        <img src="@/assets/logo.svg" alt="" class="logo"/>
        <h1 class="title">修哒哒 Xiu~</h1>
      </div>
      <div class="menus">
        <el-menu
            class="el-menu-popper-demo"
            mode="horizontal"
            :popper-offset="16"
            :ellipsis="false"
            :default-active="activeIndex"
            style="max-width: 600px"

        >
          <el-menu-item index="1" @click="handleIndex">首页</el-menu-item>
          <el-menu-item index="2" @click="handleServiceClick">服 务</el-menu-item>
          <el-menu-item index="3" @click="handleOrderManagement">订单管理</el-menu-item>
          <el-menu-item index="4" v-if="userStore.userInfo?.userRole" @click="handleBackendManagement">后台管理</el-menu-item>
          <el-menu-item index="5"  @click="handleAboutClick">关于我们</el-menu-item>
        </el-menu>
      </div>
      <div class="user" v-if="userStore.authState" @click="showUserInfo">
        <div class="user-bg">
          <el-avatar :size="32" :src="userStore.userInfo?.avatarUrl" class="avatar"/>
          <div class="username">{{ userStore.userInfo?.username }}</div>
        </div>
      </div>
      <div class="login" v-else>
        <el-button type="primary" @click="login" class="login-btn">登录</el-button>
      </div>
    </div>
  </div>
  <UserInfoCard></UserInfoCard>
</template>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #e3d9e3;
  position: relative; /* 添加相对定位 */
  background: #fff;
  .wrap {
    display: flex;
    flex-direction: row;
    width: 98%;
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid #e3d9e3;
    background: transparent !important;
    border-bottom: none !important;

    .menus {
      width: auto;

      .el-menu {
        color: #ffffff;
        background: none !important;
        border-bottom: none !important;
      }

      .el-menu-item {
        font-size: 14px!important;
        color:rgba(0, 0, 0) !important;
      }

      .el-menu-item.is-active {
        color:#1677ff !important;
      }

      .el-menu-item:hover {
        background-color: rgba(0,0,0,0.06) !important;
      }
    }

    .logo-title {
      margin-right: 100px;

      .logo {
        float: left;
        width: 34px;
        margin-top: 13px;
        margin-right: 10px;
      }

      .title {
        float: left;
        height: 30px;
        line-height: 30px;
        margin-top: 15px;
        margin-right: 20px;
        color: #333;
        font-weight: bold;
      }
    }

    .slogan {
      color: #333;
      float: left;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      margin-top: 28px;
    }

    .user {
      margin-left: auto;
      height: 60px;

      .user-bg {
        cursor: pointer;
        height: 46px;
        margin-top: 10px;
        border-radius: 10px;
        transition: 0.3s ease-in-out;

        .el-avatar {
          float: left;
          display: block;
          margin: 7px 7px 9px 10px;
        }

        .username {
          float: left;
          height: 20px;
          color:rgba(0, 0, 0, 0.6) !important;
          font-size: 14px;
          line-height: 20px;
          margin-top: 13px;
          margin-right: 10px;
        }
      }

      .user-bg:hover {
        transition: 0.3s ease-in-out;
        background-color: rgba(0, 0, 0,0.06);
      }
    }

    .login {
      margin-left: auto;

      .login-btn {
        margin-right: auto;
        height: 30px;
        width: 70px;
        margin-top: 15px;
      }
    }
  }
}
</style>